<script setup>
import {ref} from 'vue'
import {CountTo} from 'vue3-count-to'

const infolist = ref([
    {id:1,title:'车辆总数(辆)',img:'info-img-1.png',num:506329},
    {id:2,title:'当前在线数(辆)',img:'info-img-2.png',num:423908},
    {id:3,title:'今日活跃数(辆)',img:'info-img-3.png',num:120594},
    {id:4,title:'今日活跃率(%)',img:'info-img-4.png',num:86},
])
</script>

<template>

<div class="boxstyle" style="height: 400px">
    <div class="title">实时统计</div>
    <div class="info-main">
        <ul>
            <li v-for="v in infolist" :key="v.id">
                <img :src="`src/assets/img/${v.img}`" alt="">
                <p>{{v.title}}</p>
                <!-- <p>{{v.num}}</p> -->
                <countTo :startVal='0' :endVal='v.num' :duration='3000'></countTo> 
            </li>
        </ul>
    </div>
</div>


</template>

<style scoped>

</style>
